<template>
  <div class="container">
    <filter-form
      style="text-align: center"
      planType="week"
      :showDatePickerSingle="true"
      :showSearchKeyword="false"
      :currentDay="currentDay"
      :onSubmit="handleSearch"
      :onClear="fetchEpidData"
      :onExport="handleExport"
      ref="filterRef"
    />
    <div class="title">中共文山州委办公室干部职工健康监测台账</div>
    <!-- <div class="table-ground">
    <div class="tableBox" v-loading="fetchLoading">
      <table class="table-wrapper" border="1px" cellspacing="0" cellpadding="0" >
        <thead class="table-title">
        <tr height="60" style="font-weight:bold;background-color:#fafafa" >
          <td width="6%" align="center" rowspan="2">序号</td>
          <td width="6%" align="center" rowspan="2">姓名</td>
          <td width="15%" align="center" colspan="4">健康码情况</td>
          <td width="10%" align="center" colspan="3">行程卡情况</td>
          <td width="15%" align="center" colspan="3">
            疫苗接种情况
          </td>
          <td width="6%" align="center" rowspan="2">
            最近一次核酸检测情况
          </td>
          <td width="6%" align="center" rowspan="2">当日体温</td>
          <td width="6%" align="center" rowspan="2">
            当日是否存在发热、咳嗽、味觉减退等症状
          </td>
          <td width="6%" align="center" rowspan="2">当日位置</td>
          <td width="14%" align="center" rowspan="2">
            本人及家属当日是否有涉疫地区旅居史
          </td>
          <td width="10%" align="center" rowspan="2">其他需要说明的情况</td>
        </tr>
        <tr height="60" style="font-weight:bold;background-color:#fafafa" >
          <td width="4%" align="center">绿码</td>
          <td width="4%" align="center">黄码</td>
          <td width="4%" align="center">红码</td>
          <td width="3%" align="center">图片</td>
          <td width="3%" align="center">正常</td>
          <td width="3%" align="center">带*号</td>
           <td width="4%" align="center">图片</td>
          <td width="5%" align="center">第1针</td>
          <td width="5%" align="center">第2针</td>
          <td width="5%" align="center">第3针</td>
        </tr>
        </thead> 
        <tbody class="table-content">
        <tr height="60" v-for="(item, index) in epidData" :key="index" style="box-sizing: border-box;width:1928px !important">
          <td width="6%" align="center">{{index + 1}}</td>
          <td width="6%" align="center">{{item.username}}</td>
          <td width="4%" align="center">{{item.jkm_status == '绿码' ? '是' : '否'}}</td>
          <td width="4%" align="center">{{item.jkm_status == '黄码' ? '是' : '否'}}</td>
          <td width="4%" align="center">{{item.jkm_status == '红码' ? '是' : '否'}}</td>
          <td width="3%" align="center">
              <a style="color:#5c5cb9" target="_blank" :href="item.jkm_file">查看</a>
          </td>
          <td width="3%" align="center">{{item.xcm_status == '正常' ? '是' : '否'}}</td>
          <td width="3%" align="center">{{item.xcm_status == '带*号' ? '是' : '否'}}</td>
          <td width="4%" align="center"><a style="color:#5c5cb9" target="_blank" :href="item.xcm_file">查看</a></td>
          <td width="5%" align="center">{{item.yimiao_1}}</td>
          <td width="5%" align="center">{{item.yimiao_2}}</td>
          <td width="5%" align="center">{{item.yimiao_3}}</td>
          <td width="6%" align="center">{{item.lately_hesuan}}</td>
          <td width="6%" align="center">{{item.tiwen}}</td>
          <td width="6%" align="center">{{item.symptom}}</td>
          <td width="6%" align="center">{{item.location}}</td>
          <td width="14%" align="center" >
              <p style="white-space: pre-line;text-align:center;padding:5px">
              {{getLjsStr(item.sojourn_history_json)}}
              </p>
          </td>
          <td width="10%" align="center">{{item.note === null ? '' : item.note}}</td>
        </tr>
        </tbody>
      </table>
    </div>
    </div> -->
    <div class="table-ground">
    <el-table :data="epidData" style="width: 90vw;margin:0 auto;text-align:center" max-height="600" >
      <el-table-column prop="index" label="序号" width="150"> </el-table-column>
      <el-table-column prop="username" label="姓名" width="150"> </el-table-column>
      <el-table-column label="健康码状况">
        <el-table-column prop="lm" label="绿码" width="120">
        </el-table-column>
        <el-table-column prop="hm" label="黄码" width="120">
        </el-table-column>
        <el-table-column prop="rm" label="红码" width="120">
        </el-table-column>
      </el-table-column>
      <el-table-column label="行程卡情况">
        <el-table-column prop="xcm_z" label="正常" width="120">
        </el-table-column>
        <el-table-column prop="xcm_x" label="带*号" width="120">
        </el-table-column>
      </el-table-column>
      <el-table-column label="疫苗接种情况">
        <el-table-column prop="yimiao_1" label="第一针" width="120">
        </el-table-column>
        <el-table-column prop="yimiao_2" label="第二针" width="120">
        </el-table-column>
        <el-table-column prop="yimiao_3" label="第三针" width="120">
        </el-table-column>
      </el-table-column>
      <el-table-column prop="lately_hesuan" label="最近一次核酸检测情况" width="150"> </el-table-column>
      <el-table-column prop="tiwen" label="当日体温" width="150"> </el-table-column>
      <el-table-column prop="symptom" label="当日是否存在发热、咳嗽、味觉减退等症状" width="150"> </el-table-column>
      <el-table-column prop="location" label="当日位置" width="150"> </el-table-column>
      <el-table-column prop="sojourn_history_json" label="本人及家属当日是否有涉疫地区旅居史" width="150"> </el-table-column>
      <el-table-column prop="note" label="其他需要说明的情况" width="150"> </el-table-column>
      <el-table-column
        fixed="right"
        label="图片"
        width="150">
        <template slot-scope="scope">
          <el-button @click="handlePreview(scope.row.jkm_file)" style="color:#409eff !important;padding:0px" type="text" size="small">健康码</el-button>
          <el-button @click="handlePreview(scope.row.xcm_file)" style="color:#409eff !important;padding:0px" type="text" size="small">行程码</el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { getEpidData } from "@/api/epidemic";
export default {
  name: "Epidemic",
  components: {
    FilterForm: () => import("../markSys/plann/components/FilterForm.vue"),
  },
  mounted() {
    this.fetchEpidData();
  },
  computed: {},
  created() {},
  data() {
    return {
      epidData: [],
      currentDay: moment().format("YYYY-MM-DD"),
      fetchLoading: false,
      fetchTime: moment().format("YYYY-MM-DD"),
    };
  },
  methods: {
    async fetchEpidData() {
      this.fetchLoading = true;
      const res = await getEpidData({
        tb_date: this.currentDay,
      });
      const { data } = res;
      this.fetchLoading = false;
      this.epidData = this.forMatData(data);
    },
    async handleSearch(param) {
      this.fetchLoading = true;
      const { dateSingle, group, user = "", userType } = param;
      this.fetchTime = moment(dateSingle).format("YYYY-MM-DD");
      const _param = {
        tb_date: moment(dateSingle).format("YYYY-MM-DD") || null,
      };
      const _user = typeof user === "string" ? user.slice(1) : user;
      if (userType === "user") {
        _param.user = _user;
      } else {
        _param.department = _user;
      }
      if (group && group.length) {
        _param.group = group.join(",");
      }
      const res = await getEpidData(_param);
      const { data } = res;
      this.epidData = this.forMatData(data);
      this.fetchLoading = false;
    },
    handlePreview(url){
      if(url === '' || url === null){
        this.$message.warning('图片不存在')
        return
      }
      window.open(url)
    },
    forMatData(arr){
      let dataList = []
      const that = this
      arr.forEach((value,index) =>{
        const {
          username,
          jkm_status,
          xcm_status,
          yimiao_1,
          yimiao_2,
          yimiao_3,
          lately_hesuan,
          hsjc_time,
          tiwen,
          symptom,
          location,
          sojourn_history_json,
          note,
          jkm_file,
          xcm_file
        } = value;
        const param = {
          index: index + 1,
          username,
          lm: jkm_status == "绿码" ? "是" : "否",
          hm: jkm_status == "黄码" ? "是" : "否",
          rm: jkm_status == "红码" ? "是" : "否",
          xcm_z: xcm_status == "正常" ? "是" : "否",
          xcm_x: xcm_status == "带*号" ? "是" : "否",
          yimiao_1,
          yimiao_2,
          yimiao_3,
          lately_hesuan:that.getHeSuanStr(lately_hesuan,hsjc_time),
          tiwen,
          symptom,
          location,
          sojourn_history_json: that.getLjsStr(sojourn_history_json),
          note: note == null ? "" : note,
          jkm_file,
          xcm_file
        };
        dataList.push(param);
      })
      return dataList
    },
    getLjsStr(arr) {
      if (arr.length === 0) {
        return "";
      }
      let str = "";
      arr.forEach((el) => {
        str += `${el.name},${el.gx},${
          el.address.replace(" ", "") + el.street
        }\n${el.startDate}~${el.endDate}\n  
             `;
      });
      return str;
    },
    getHeSuanStr(hesuan,time){
      if(hesuan === null){
        return ''
      }
      return `结果:${hesuan || '无'}\n日期:${time ? moment(time).format('YYYY-MM-DD') : '无'}`
    },
    //通过属性名获取值。
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          return v[j];
        })
      );
    },
    handleExport() {
      const that = this;
      if (this.epidData.length === 0) {
        this.$message.warning("暂无数据可以导出");
        return;
      }
      const dataList = this.epidData
      import("@/vendor/Export2Excel").then((excel) => {
        const multiHeader = [
          [
            "中共文山州委办公室干部职工健康监测台账",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
          ],
          [
            `时间:${this.fetchTime}`,
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
          ],
          [
            "序号",
            "姓名",
            "健康码情况",
            "",
            "",
            "行程卡情况",
            "",
            "疫苗接种情况",
            "",
            "",
            "最近一次核酸检测情况",
            "当日体温",
            "当日是否存在发热、咳嗽、味觉减退等症状",
            "当日位置",
            "本人及家属当日是否有涉疫地区旅居史",
            "其他需要说明的情况",
          ],
        ];
        const header = [
          "",
          "",
          "绿码",
          "黄码",
          "红码",
          "正常",
          "带*号",
          "第1针",
          "第2针",
          "第3针",
          "",
          "",
          "",
          "",
          "",
          "",
        ];
        const filterVal = [
          "index",
          "username",
          "lm",
          "hm",
          "rm",
          "xcm_z",
          "xcm_x",
          "yimiao_1",
          "yimiao_2",
          "yimiao_3",
          "lately_hesuan",
          "tiwen",
          "symptom",
          "location",
          "sojourn_history_json",
          "note",
        ];
        const list = dataList;
        const data = that.formatJson(filterVal, list);
        const merges = [
          "A1:M1",
          "B2:P2",
          "A3:A4",
          "B3:B4",
          "C3:E3",
          "F3:G3",
          "H3:J3",
          "K3:K4",
          "L3:L4",
          "M3:M4",
          "N3:N4",
          "O3:O4",
          "P3:P4",
        ];
        excel.export_json_to_excel({
          multiHeader,
          header,
          merges,
          data,
          filename: "中共文山州委办公室干部职工健康监测台账",
          autoWidth: true,
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-table th,
::v-deep .el-table td {
  text-align: center !important;
}
::v-deep .el-table .cell {
  white-space: pre-line !important;
}
.title {
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  margin-top: 60px;
  margin-bottom: 30px;
}
.tableBox {
  max-width: 90vw;
  max-height: 60;
  margin: 0 auto !important;
  overflow-x: scroll;
}
.table-ground {
  width: 92vw;
  padding: 30px;
  box-shadow: 0 2px 12px 0 #e0e0e0;
  margin: 0 auto;
}
.table-title {
  width: 1920px;
  vertical-align: middle;
}
.table-content {
  max-height: 40vh;
  width: 1928px;
  overflow-y: scroll;
  vertical-align: middle;
}
.table-wrapper {
  width: 1920px;
  font-size: 14px;
  border-collapse: collapse;
  border: none;
  table-layout: fixed;
}
</style>
